<template>
	<div>
		<div style="display: none;">
			<div id="okmama">
				.textIndent {
					text-indent: 2em
				}
				
				.mtop {
					margin-top: 12px;
				}
				
				.mtopbom {
					margin: 12px 0px;
				}
				
				.flex-one {
					flex: 1;
				}
				
				.date {
					font-size: 18px;
					font-weight: bold;
				}
				
				.title-one {
					font-size: 20px;
					font-weight: bold;
					text-align: center;
					position: relative;
				}
				
				.title {
					font-size: 22px;
					font-weight: bold;
					text-align: center;
					letter-spacing: 8px;
					text-indent: 8px;
				}
				
				.title-two-one {
					font-size: 20px;
					font-weight: bold;
					text-align: center;
					letter-spacing: 2px;
					text-indent: 2px;
				}
				
				.title-two {
					font-size: 18px;
					font-weight: bold;
					text-align: center;
					letter-spacing: 8px;
					text-indent: 8px;
				}
				
				.text {
					font-size: 14px;
				}
				
				.texttwo {
					font-size: 16px;
				}
				
				.text-bold {
					font-weight: bold;
					margin-right: 8px;
				}
				
				.text-rightpad {
					margin-left: 8px;
				}
				
				.flex {
					display: flex;
				}
				
				.flex-warps {
					flex-wrap: wrap;
				}
				
				.flex-san {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
				
				.text-right {
					text-align: right;
				}
				
				.text-center {
					text-align: center;
				}
				
				.float-right {
					position: absolute;
					top: 0;
					right: 0;
					font-size: 14px;
				}
				
				.border {
					border: 1px solid #999999;
				}
				
				.xiahua {
					border-bottom: 1px solid #999999;
				}
				
				.xiahua_center {
					text-align: center;
					padding: 0px 12px;
					border-bottom: 1px solid #999999;
				}
			</div>
		</div>
		<div style="display: flex;justify-content: flex-end;align-items: center;margin-bottom: 18px;">
			<el-button v-print="'#printmz'">打印</el-button>
			<!-- <el-button @click="printClick">打印</el-button> -->
		</div>
		<div id="printmz" v-if="msg">
		<!-- <div ref="print" v-if="msg"> -->
			<div class="title-two-one" style="margin-top: 8px;">
				杏林涧中医院
			</div>
			<div class="title-two" style="margin-top: 12px;">门诊记录</div>
			<div class="texttwo flex-san xiahua" style="margin-top: 18px;" v-if="msg">
				<div v-if="msg.patient">姓名：{{msg.patient.name}}</div>
				<div v-if="msg.doctor">科室：{{msg.doctor.department_id_text}}</div>
				<div>门诊号：{{msg.order_sn}}</div>
			</div>
			<div class="xiahua" v-if="msg.patient">
				<div class="flex-san mtop">
					<div class="texttwo flex flex-one">
						<div>科室：</div>
						<div>{{msg.doctor.department_id_text}}</div>
					</div>
					<div class="texttwo flex flex-one">
						<div class='text-rightpad'>{{msg.treated_type_text}}</div>
					</div>
					<div class="texttwo flex flex-one">
						<div class='text-rightpad'>过敏史：</div>
						<div>{{msg.guomin_ids_text}}</div>
					</div>
				</div>
				<div class="flex-san mtop">
					<div class="texttwo flex flex-one">
						<div>性别：</div>
						<div>{{msg.patient.gender_text}}</div>
					</div>
					<div class="texttwo flex flex-one">
						<div class='text-rightpad'>年龄：</div>
						<div>{{msg.patient.age}}{{msg.patient.age_type_text}}</div>
					</div>
					<div class="texttwo flex flex-one">
						<div class='text-rightpad'>姓名：</div>
						<div>{{msg.patient.name}}</div>
					</div>
					<div class="texttwo flex" style="flex:2;">
						<div class='text-rightpad'>身份证号：</div>
						<div>{{msg.patient.id_card}}</div>
					</div>
				</div>
				<div class="flex-san mtop">
					<div class="texttwo flex flex-one">
						<div>职业：</div>
						<div></div>
					</div>
					<div class="texttwo flex flex-one">
						<div class='text-rightpad'>婚姻：</div>
						<div></div>
					</div>
					<div class="texttwo flex flex-one">
						<div class='text-rightpad'>民族：</div>
						<div></div>
					</div>
					<div class="texttwo flex flex-one" style="flex:2;">
						<div class='text-rightpad'>出生地：</div>
						<div></div>
					</div>
				</div>
				<div class="flex-san mtop">
					<div class="texttwo flex flex-one">
						<div>现住址：</div>
						<div>{{msg.patient.city_text}}{{msg.patient.address}}</div>
					</div>
					<div class="texttwo flex flex-one">
						<div class='text-rightpad'>支付时间：</div>
						<div>{{msg.paytime_text}}</div>
					</div>
				</div>
				<div class="flex-san mtop">
					<div class="texttwo flex flex-one">
						<div>邮编：</div>
						<div></div>
					</div>
					<div class="texttwo flex flex-one">
						<div class='text-rightpad'>记录时间：</div>
						<div></div>
					</div>
				</div>
				<div class="flex-san mtop">
					<div class="texttwo flex flex-one">
						<div>联系人：</div>
						<div></div>
					</div>
					<div class="texttwo flex flex-one">
						<div class='text-rightpad'>与病人关系：</div>
						<div></div>
					</div>
					<div class="texttwo flex flex-one">
						<div class='text-rightpad'>病史陈述者：</div>
						<div></div>
					</div>
				</div>
				<div class="flex-san mtopbom">
					<div class="texttwo flex flex-one">
						<div>联系人地址：</div>
						<div></div>
					</div>
					<div class="texttwo flex flex-one">
						<div class='text-rightpad'>电话：</div>
						<div></div>
					</div>
					<div class="texttwo flex flex-one">
						<div class='text-rightpad'>可靠程度：</div>
						<div></div>
					</div>
				</div>
			</div>
			<div class="texttwo xiahua" style="height:650px;" v-if="msg">
				<div class="mtopbom textIndent">
					主诉：{{msg.zhusu_ids_text}}
				</div>
				<div class="mtopbom textIndent">
					现病史：{{msg.bingshi_ids_text}}
				</div>
				<div class="mtopbom textIndent">
					既往史：{{msg.jsbingshi_ids_text}}
				</div>
			</div>
		</div>
	</div>
</template>


<script>
	import {
		getLodop
	} from './LodopFuncs';
	export default {
		name: 'Dayincard',
		props: ['id'],
		data() {
			return {
				qingqiuid: '',
				msg: {},
				nian: '',
				yue: '',
				ri: '',
				nian1: '',
				yue1: '',
				ri1: '',
				shi1: '',
				nian2: '',
				yue2: '',
				ri2: '',
				shi2: '',
				city: {},
			}
		},
		watch: {
			id(newval, oldval) {
				console.log(newval, oldval)
				this.qingqiuid = newval;
			}
		},
		mounted() {
			this.qingqiuid = this.id;
			this.getmsg();
		},
		methods: {
			getmsg() {
				this.msg = this.qingqiuid;
			},
			printClick() {
				// 调用打印函数
				this.lodopPrint();
			},
			lodopPrint() {
				//初始化打印函数
				let LODOP = getLodop();
				var strBodyStyle = '<style>' + document.getElementById('okmama').innerHTML +
					'</style>' //设置打印样式
				var strFormHtml = strBodyStyle + '<body>' + document.getElementById('printmz').innerHTML +
					'</body>'
				// var strFormHtml = '<body>' + document.getElementById('printmz').innerHTML + '</body>'
				// 初始化打印
				LODOP.PRINT_INIT();
				// 设置纸张大小
				LODOP.SET_PRINT_PAGESIZE(1, '210mm', '297mm', 'A4');
				// 设置打印内容大小
				// LODOP.ADD_PRINT_HTM(0, 0, '283pt', '510pt', this.$refs.print.innerHTML);
				LODOP.ADD_PRINT_HTM('2%', '2%', '98%', '98%', strFormHtml);
				// 直接打印 
				LODOP.PRINT();
				// 打印预览
				// LODOP.PREVIEW();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.textIndent {
		text-indent: 2em
	}

	.mtop {
		margin-top: 12px;
	}

	.mtopbom {
		margin: 12px 0px;
	}

	.flex-one {
		flex: 1;
	}

	.date {
		font-size: 18px;
		font-weight: bold;
	}

	.title-one {
		font-size: 20px;
		font-weight: bold;
		text-align: center;
		position: relative;
	}

	.title {
		font-size: 22px;
		font-weight: bold;
		text-align: center;
		letter-spacing: 8px;
		text-indent: 8px;
	}

	.title-two-one {
		font-size: 20px;
		font-weight: bold;
		text-align: center;
		letter-spacing: 2px;
		text-indent: 2px;
	}

	.title-two {
		font-size: 18px;
		font-weight: bold;
		text-align: center;
		letter-spacing: 8px;
		text-indent: 8px;
	}

	.text {
		font-size: 14px;
	}

	.texttwo {
		font-size: 16px;
	}

	.text-bold {
		font-weight: bold;
		margin-right: 8px;
	}

	.text-rightpad {
		margin-left: 8px;
	}

	.flex {
		display: flex;
	}

	.flex-warps {
		flex-wrap: wrap;
	}

	.flex-san {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.text-right {
		text-align: right;
	}

	.text-center {
		text-align: center;
	}

	.float-right {
		position: absolute;
		top: 0;
		right: 0;
		font-size: 14px;
	}

	.border {
		border: 1px solid #999999;
	}

	.xiahua {
		border-bottom: 1px solid #999999;
	}

	.xiahua_center {
		text-align: center;
		padding: 0px 12px;
		border-bottom: 1px solid #999999;
	}
</style>
